/**
* 头部菜单
*/ 
<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    background-color="rgb(62, 61, 61)"
    text-color="#fff"
    active-text-color="#fff"
  >
    <el-button class="buttonimg">
      <img
        class="showimg"
        :src="collapsed ? imgsq : imgshow"
        @click="toggle(collapsed)"
      />
    </el-button>

    <div style="display: flex;justify-content: flex-end;margin-top: -56px;">

    <!-- 上层图标 -->
    <div style="width: 250px;margin-right: 10px; display: flex;justify-content: center;align-items: center;">
      
      <div style="display: flex; margin-top: -0.5rem;margin-right: 10px;" class="no-border-button">
           <el-popover placement="bottom" trigger="click">
               <div style="width: 18rem; height: 23rem;">
                 <checking></checking>
               </div>
             <el-button icon="el-icon-date" style="margin-top: 10px; background-color: rgb(62, 61, 61);color: aliceblue;"
                 @click="checking(collapsed)" slot="reference">考勤</el-button>
             </el-popover>
      </div>

      <el-tooltip class="item"  effect="dark" content="审批" placement="bottom">
        <el-button @click="approve" type="primary" icon="el-icon-s-order" circle></el-button>
      </el-tooltip>
      <el-tooltip class="item"  effect="dark" content="客服" placement="bottom">
        <el-button @click="service" type="primary" icon="el-icon-s-comment" circle></el-button>
      </el-tooltip>
      
      <el-tooltip class="item"  effect="dark" content="通知" placement="bottom">
        <el-badge  style="margin-top: 10px;margin-left: 10px;margin-right: 20px;" :value="12" class="item" type="primary">
          <el-button @click="notification();drawer = true" style="margin-top: -10px;" type="primary" icon="el-icon-bell" circle></el-button>
        </el-badge>
      </el-tooltip>
      
      
      
    </div>
    <!-- 通知栏 -->
    <el-drawer :visible.sync="drawer" :with-header="false" size="70%">
        <div style="margin-left: 20px;margin-right: 20px;">
          <h3>消息提醒</h3>
          <div>
             <span style="font-size: 20px;">显示：</span>
             <el-button @click="read" type="info" plain>已读</el-button>
             <el-button @click="unred" type="info" plain>未读</el-button>
          </div>
          <div v-if="showA">
            <div>共{{ count }}条</div>
            <div @click="tongzhi" class="xianA" v-for="(item,index) in list" style="display: flex;justify-content: space-between;align-items: center;">

                  <div style="display: flex;margin-left: 20px;">
                      <el-button  type="info" icon="el-icon-platform-eleme" circle></el-button>
                      <div style="margin-left: 10px;">
                        <div style="cursor: default;"> {{item.biaoti}} </div>
                        <div style="cursor: default;"> {{item.neirong}} </div>
                      </div>
                  </div>
                  
                  <div style="margin-right: 20px;">
                      <div>6天前</div>
                      <div style="color: blue;">已读</div>
                      <el-button type="text" style="margin-top: -10px;">删除</el-button>
                  </div>
                </div>
             
          </div>
          <div v-if="showB">
            bbb
          </div>
        </div>
            
    </el-drawer>
    <el-submenu index="3" class="submenu" style="margin-top: -0px;">
      <template slot="title">超级管理员</template>
      <el-menu-item
        @click="
          enter();
        "
        style="text-align: center"
        class="el-icon-user"
        >个人中心</el-menu-item
      >
      <el-menu-item
        @click="exit()"
        index="2-3"
        style="text-align: center"
        class="el-icon-circle-close"
        >退出登录</el-menu-item
      >
    </el-submenu>
    </div>
  </el-menu>
</template>
<script>

import checking from "./checking.vue";
export default {
  name: "navcon",
  data() {
    return {
      collapsed: true,
      imgshow: require("../assets/img/show.png"),
      imgsq: require("../assets/img/sq.png"),
      user: {},
      drawer: false,
      showA:'true',
      showB:'false',
      //统计审批条数
      count: 3,
      list:[{
          biaoti:'待处理流程',
          neirong:'您提交的普通审批需要您配置审批流程处理人，请及时处理'
        },
        {
          biaoti:"待审批提醒",
          neirong:'审批的类型'
        }
      ]
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.user = JSON.parse(localStorage.getItem("userdata"));
  },
  components:{
     checking
   },
  methods: {
    // 退出登录
    exit() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setTimeout(() => {

            this.$store.commit("logout", "false");
            this.$router.push({ path: "/login" });
            localStorage.removeItem("JWTHeaderName");
            //清空所有缓存
            localStorage.clear();
            sessionStorage.clear();
            this.$message({
              type: "success",
              message: "已退出登录!",
            });
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
      },
      enter() {
        this.$router.push({ path: "/personalCenter/personalCenter" });
      },
    // 切换显示
    toggle(showtype) {
      console.log(showtype);
      this.collapsed = !showtype;
      this.$root.Bus.$emit("toggle", this.collapsed);
    },
    //审批
    approve(){
      console.log("审批")
      this.$router.push({ path: "/maheimeinavcon/approve" });
    },
    //客服
    service(){
      console.log("客服")
      this.$router.push({ path: "/maheimeinavcon/service" });
    },
    //通知
    notification(){
      this.showA = true
      this.showB = false
    },
    read(){
      this.showA = true
      this.showB = false
    },
    unred(){
      this.showA = false
      this.showB = true
    },
    tongzhi(){
      console.log("hello")
       this.$router.push('/maheimei/contractapproval')
    }
  },
};
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}

.buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
}
.showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 17px;
  left: 17px;
}
.showimg:active {
  border: none;
}
.xianA:hover{
  background-color: rgb(247, 248, 250);
}
.no-border-button .el-button {
  border: none;

}
</style>